import { PageContainer } from '@ant-design/pro-layout';

window.addEventListener('message', (e) => {
  if (e.data?.type !== 'load') {
    //鼠标事件
    console.log('iframe时间传递', e.data);
    if (e.data?.type == 'click') {
    }
    return;
  }
  //加载完毕
  console.log('iframe加载完毕');
});

const openClick = () => {
  const iframeObj = document.getElementById('iframeDiagram') as HTMLIFrameElement;
  const messageData = {
    type: 'flicker',
    object: {
      id: '388',
    },
  };
  iframeObj.contentWindow?.postMessage(messageData, '*');
};
const closeClick = () => {
  const iframeObj = document.getElementById('iframeDiagram') as HTMLIFrameElement;
  const messageData = {
    type: 'stopflicker',
    object: {
      id: '388',
    },
  };
  iframeObj.contentWindow?.postMessage(messageData, '*');
};

const topoUrl = 'https://topo.thingjs.com/#/openview/da8bba4980f271bc?page=twkctlo9';

const MainContainer = () => {
  return (
    <PageContainer
      content={
        <iframe
          id="iframeDiagram"
          allowFullScreen
          frameBorder="0"
          style={{ width: '100%', height: '87vh' }}
          src={topoUrl}
        />
      }
    >
      <button onClick={openClick}>测试通信-开</button>
      <button onClick={closeClick}>测试通信-关</button>
    </PageContainer>
  );
};
export default MainContainer;
